<template>
  <div class="consignee-background" v-if="visible">
    <div class="content">
      <h4 style="margin: 0 auto;">选择收货人</h4>
      <div id="consignee-container" :data-index="index" :data-cid="cid">
        <div class='folding-consignee' v-for="(item,index) in consigneeL" :key="index" @click="select(item.cid, index)">
          <div>{{ item.consigneeName + '  |  ' + item.consigneePhone }}</div>
          <div>地址: {{ item.consigneeAddress }}</div>
        </div>
      </div>
      <div style="margin: 5px auto;">
        <span class="operator-button" id="delete-consignee-button" @click="deleteConsignee()">删除</span>
        <span class="operator-button" @click="createNewConsignee">新建</span>
        <span class="operator-button" @click="closeThis()">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    cid: {
      type: Number,
      default: -1
    },
    visible: {
      type: Boolean,
      default: false
    },
    consigneeL: {
      type: Array,
      default: function(){
        return []
      }
    },
    pid_tmp: {
      type: String,
      default: ''
    }
  },
  methods: {
    closeThis() {
      this.$parent.showConsigneeList(false)
      this.$parent.changeConsignee(this.$parent.index)
    },
    select(cid, index) {
      let list = document.getElementById('consignee-container')
      if(list.children.item(this.$parent.index)){
        list.children.item(this.$parent.index).classList.remove('selected')
      }
      list.children.item(index).classList.add('selected')
      this.$parent.index = index
      let elem = document.getElementById('delete-consignee-button')
      elem.classList.add('operator-button')
      elem.classList.remove('disabled-button')
      console.log('选中cid：' + cid)
    },
    createNewConsignee() {
      this.$parent.showNewConsignee(true)
    },
    deleteConsignee() {
      if(this.cid === -1){
        return
      }
      axios.get(this.globalData.apiURL + '/consignee/delete?cid=' + this.cid, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          console.log(this.globalData.apiURL + '/consignee/delete?cid=' + this.cid + ' ' + res)
          // location.reload()
          // this.$parent.loadConsigneeList()
          this.consigneeL.splice(this.$parent.index, 1)
        })
        .catch(error => {
          console.log(error)
        })
      let elem = document.getElementById('delete-consignee-button')
      elem.classList.remove('operator-button')
      elem.classList.add('disabled-button')
    }
  }
}
</script>

<style scoped>

.consignee-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.content {
  background-color: #FFFFFF;
  width: 75vw;
  padding: 5% 0;
  display: grid;
  flex-wrap: wrap;    /* 令子元素居中 */
  justify-content: center;
}

.folding-consignee {
  user-select: none;
  border-radius: 12px;
  transform: translate(-10%, 0);
  /* border: 1px solid rgb(109, 109, 109); */
  background: linear-gradient(90deg, #e8e8e8, #c5c5c5);
  cursor: pointer;
  margin: 10px;
  text-align: center;
  width: 110%;
}

span.operator-button {
  user-select: none;
  color: rgb(240, 246, 255);
  font-style: normal;
  font-size: large;
  font-weight: 1000;
  margin: 3px 10px;
  padding: 3px 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #0022ff, #002ead);
}

.disabled-button {
  user-select: none;
  color: rgb(240, 246, 255);
  font-style: normal;
  font-size: large;
  font-weight: 1000;
  margin: 3px 10px;
  padding: 3px 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #686868, #3b3b3b);
}

.selected {
  background: linear-gradient(90deg, #b5d4f7, #5983f7);
}
/*
.folding-consignee:hover {
    border: 4px solid rgb(175, 47, 8);
    transition: all .3s;
} */
</style>
